<template>
  <div class="top-button">
    <div
      class="btn"
      :class="{ active: active === 'qiye' }"
      @click="onClick('qiye')"
    >
      企业基础信息
    </div>
    <div
      class="btn"
      :class="{ active: active === 'danger' }"
      @click="onClick('danger')"
    >
      重大危险源监测
    </div>
    <div
      class="btn"
      :class="{ active: active === 'risk' }"
      @click="onClick('risk')"
    >
      作业/巡检
    </div>
    <div
      class="btn"
      :class="{ active: active === 'emergency' }"
      @click="onClick('emergency')"
    >
      双重预防
    </div>
  </div>
</template>

<script setup>
const emits = defineEmits(["handleClick"]);
const active = ref("danger");
const onClick = (type) => {
  active.value = type;
  emits("handleClick", active.value);
};
</script>

<style lang="scss" scoped>
.top-button {
  background-color: rgb(255, 255, 255, 0);
  background-image: url("../../../assets/images/topButton.png");
  background-size: 480px 48px;
  background-repeat: no-repeat;
  width: 480px;
  height: 48px;
  display: flex;
  padding: 0px 50px;
  justify-content: space-around;
  align-items: center;
  .btn {
    width: 106px;
    height: 34px;
    display: inline-block;
    padding: 0 8px;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    line-height: 34px;
    background-image: url("../../../assets/images/btnbg.png");
    color: #00d5ff;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center center;
    text-align: center;
    &.active {
      background-image: url("../../../assets/images/acbtnbg.png");
    }
  }
}
</style>
